<template>
  <el-dialog v-model="visible" title="退款详情" width="50%">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="ID">{{ detail?.id }}</el-descriptions-item>
      <el-descriptions-item label="退款单号">{{ detail?.out_refund_no }}</el-descriptions-item>
      <el-descriptions-item label="关联订单号">
        {{ detail?.payment?.out_trade_no }}
      </el-descriptions-item>
      <el-descriptions-item label="退款金额">{{ detail?.refund_amount }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="statusTagType(detail!.status)">
          {{ statusText(detail!.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detail?.created_at }}</el-descriptions-item>
      <el-descriptions-item label="完成时间">
        {{ detail?.success_time || "未完成" }}
      </el-descriptions-item>
      <el-descriptions-item label="退款原因">{{ detail?.reason }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { type PaymentRefundType } from "@/api/payment/refund";

const props = defineProps<{
  modelValue: boolean;
  detail: PaymentRefundType | null;
}>();

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

function statusText(status: string) {
  const map: Record<string, string> = {
    pending: "待处理",
    processing: "处理中",
    success: "退款成功",
    fail: "退款失败",
  };
  return map[status] || status;
}

function statusTagType(status: string): any {
  const map: Record<string, string> = {
    pending: "info",
    processing: "warning",
    success: "success",
    fail: "danger",
  };
  return map[status] || "";
}
</script>
